<template>
    <view class="content">
        <view class="box">
            <view class="top">
                <view class="title">{{data.title}}</view>
                <view class="u-flex">
                    <view class="gr">{{data.member_type_txt}}</view>
                    <view class="cs">{{data.type_txt}}</view>
                </view>
            </view>
            <view class="item">
                <view class="i-left">牛只类型</view>
                <view class="i-right">{{data.gender}}</view>
            </view>
            <view class="item">
                <view class="i-left">地区</view>
                <view class="i-right">
                    {{data.province_txt}}{{data.city_txt}}{{data.district_txt}}
                </view>
            </view>
            <view class="item">
                <view class="i-left">详细地址</view>
                <view class="i-right">{{data.address}}</view>
            </view>
        </view>
        
        <view class="box">
            <view class="text">{{data.describe}}</view>
            <view class="img-box" v-if="data.image_uri_txt && data.image_uri_txt.length > 0">
                <image v-for="(el, ind) in data.image_uri_txt" :key="ind" :src="el.attach_uri" class="img" 
                    @click.stop="$previewImage(data.image_uri_txt, ind)"></image>
            </view>
        </view>
        
        <view class="box2">
            <image src="../../static/icon/info.png" class="info-icon"></image>
            <view class="u-flex-1">
                <view class="name">{{data.contacts}}</view>
                <view class="tel">{{data.telephone}}</view>
            </view>
            <image src="../../static/icon/tel3.png" class="tel3" @click="goTel(data.telephone)"></image>
        </view>
        
        <view class="box2" v-if="data.review_status != 2">
            <view>
                <view class="name">审核状态：{{data.review_status_txt}}</view>
                <view class="text" v-if="data.review_status == 3 && data.review_reason">
                    拒绝原因：{{data.review_reason}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: {},
                id: '',
            };
        },
        onLoad(option) {
            this.id = option.id
            this.getData()
        },
        methods: {
			goTel(t) {
				this.$call(t)
			},
			
            getData(){
            	this.$ajax('LnformationInfo', {
            		userToken: this.$getSync('userToken'),
                    id: this.id,
                    category: 1,//1-牛源信息 2-人力场地信息
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.data = ret.data.info
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 40rpx 25rpx;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: bold;
        word-break: break-all;
        white-space: pre-line;
        padding-right: 15rpx;
    }
    .gr{
        padding: 4rpx 15rpx;
        border-radius: 6rpx;
        font-size: 23rpx;
        color: #00734c;
        background-color: #d3f2e8;
    }
    .cs{
        padding: 4rpx 15rpx;
        border-radius: 6rpx;
        font-size: 23rpx;
        color: #ff5f2b;
        background-color: #fff1ec;
        margin-left: 10rpx;
    }
    .item{
        padding-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
    }
    .i-left{
        width: 145rpx;
        color: #656565;
    }
    .i-right{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .text{
        font-size: 28rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-top: 10rpx;
    }
    .img{
        width: 200rpx;
        height: 200rpx;
        border: 2rpx solid #dedede;
        border-radius: 10rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        box-sizing: border-box;
    }
    .img:nth-child(3n) {
        margin-right: 0;
    }
    
    
    .box2{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 25rpx;
    }
    .info-icon{
        width: 25rpx;
        height: 26rpx;
        margin-right: 20rpx;
    }
    .name{
        font-size: 28rpx;
        font-weight: bold;
    }
    .tel{
        font-size: 28rpx;
        color: #656565;
        padding-top: 10rpx;
    }
    .tel3{
        width: 48rpx;
        height: 48rpx;
        margin-left: 20rpx;
    }

</style>
